<template>
    <div ref="videoContainer" class="flv-player">
      <video ref="player" controls="controls" muted></video>
    </div>
  </template>
  
  <script>
  import flvjs from 'flv.js';
  
  export default {
    name: 'FlvPlayer',
    props: {
      src: {
        type: String,
        required: true
      },
      type: {
        type: String,
        default: 'flv'
      },
      isLive: {
        type: Boolean,
        default: false
      }
    },
    mounted() {
      if (flvjs.isSupported()) {
        this.$nextTick(() => {
          this.initFlvPlayer();
        });
      } else {
        console.log('FLV format not supported');
      }
    },
    watch: {
      src(newSrc, oldSrc) {
        if (newSrc !== oldSrc) {
          this.reloadFlvPlayer();
        }
      }
    },
    methods: {
      initFlvPlayer() {
        let video = this.$refs.player;
  
        if (video && video instanceof HTMLVideoElement) {
          this.flvPlayer = flvjs.createPlayer({
            type: this.type,
            url: this.src,
            isLive: this.isLive
          });
  
          this.flvPlayer.attachMediaElement(video);
          try {
            this.flvPlayer.load();
          } catch (error) {
            console.log(error);
          }
        } else {
          console.error('Video element is not valid:', video);
        }
      },
      reloadFlvPlayer() {
        this.destroyFlvPlayer();
        this.initFlvPlayer();
      },
      destroyFlvPlayer() {
        if (this.flvPlayer) {
          this.flvPlayer.unload();
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        }
      }
    },
    beforeDestroy() {
      this.destroyFlvPlayer();
    }
  };
  </script>
  
  <style scoped>
  .flv-player {
    width: 100%;
    height: 100%;
  }
  video {
    width: 100%;
    height: 100%;
  }
  </style>
  